
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin:0;
    }
    #bg{
        position: fixed;
        left:0px;
        top:0px;
        background-color:darkgray;
        height:100%;
        width:100%;
        opacity: 0.5;
    }
#tanc{
    top:80px;
    left:300px;
    position:absolute; 
    color:white;
    border:2px solid black;
    width:300px;
    background-color: black;
}
.bd{
    font-size: 16px;
    color:white;
    position: relative;
    width:280px;
    left:20px;
    height:100px;
}
h3{
    font-size:16px;
    margin-top:25px;
    margin-left:100px;

}
#right{
position:absolute;
width:25px;
height:25px;
border-radius: 5px;
background-color: red;
right:5px;
top:5px;
text-align: center;
}
button{
    margin-top:10px;
    margin-left:20px;
    width:120px;
    height:40px;
    font-size:16px;
    border-radius: 10%;
}
.i{
    position: relative;
    font-size: 17px;
    margin-left:50px;
    color:white;
    top:6px;
}
.i1{
    position: relative;
    font-size: 17px;
    margin-left:50px;
    color:blue;
    top:6px;
}
hr{
    position: relative;
    left:-15px;
    top:10px;
}
</style>
<body>
    <button type="button" id='btn' onclick="tip()">点我出现弹窗</button>
    <div id="bg">
    <div id="tanc">
        <h3>弹窗标题</h3>
        <div id="right" onclick="hidder()">x</div>
        <div class="bd">弹窗内容，告知当前状态，信息和解决办法，描述文字尽量控制在三行以内
            <hr width="290">
            <span class="i">辅助操作</span><span class="i1">主操作</span>
        </div>
    </div>
    </div>
    <script>
        document.getElementById('bg').style.display='none';
    function tip(){
        document.getElementById('bg').style.display='';
    }
    function hidder(){
        document.getElementById('bg').style.display="none"
    }
    </script>
</body>
</html>
